<template>
  <div class="bottom_box">
    <div class="bottom_box_left">
      <div class="bottom_box_left_title"></div>
      <div class="bottom_box_left_list">
        <ul>
          <!-- 消息列表 -->
          <li
            :class="[
              chat_index == index ? 'list_tiem list_tiem_hover' : 'list_tiem',
            ]"
            v-for="(item, index) in list_item[0].item"
            :key="index"
            @click="click_change(index)"
          >
            <div class="list_tiem_center">
              <div class="list_tiem_center_img">
                <img src="@/assets/images/customer_service_img/face/dog.jpg" />
              </div>
              <div class="sum_box">
                <div class="list_tiem_center_title">
                  <span>{{ item.lsit_name }}</span>
                </div>
                <div class="list_tiem_center_msg">
                  <span>{{ item.list_last_msg }}</span>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="bottom_box_right">
      <div class="bottom_box_right_title">
        <span>别叫我狗子</span>
      </div>
      <div class="bottom_box_right_body public_body_css">
        <!-- <ul>
          <li v-for="(data,index) in list_item[0].item[chat_index].list_msg" :key="index">
            {{data.msg_content}}
          </li>
        </ul> -->
        <div class="msg_list">
          <div class="msg_list_center">
            <div
              class="list"
              v-for="(data, index) in list_item[0].item[chat_index].list_msg"
              :key="index"
            >
              <!-- 不是我发的消息 -->
              <div class="msg_list_row" v-if="!data.msg_is_me">
                <div class="msg_list_img">
                  <img
                    src="@/assets/images/customer_service_img/face/dog.jpg"
                  />
                </div>
                <div class="msg_list_item">
                  <div class="msg_list_item_center">
                    <span>
                      {{ data.msg_content }}
                    </span>
                  </div>
                </div>
              </div>

              <!-- 是我发的消息 -->

              <div class="msg_list_row_isme" v-if="data.msg_is_me">
                <div class="msg_list_item_isme">
                  <div class="msg_list_item_center_isme">
                    <span> {{ data.msg_content }}</span>
                  </div>
                </div>
                <div class="msg_list_img_isme">
                  <img
                    src="@/assets/images/customer_service_img/face/dog.jpg"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom_msg">
        <div class="msg_box public_body_css">
          <div class="msg_box_center">
            <div class="picture_box">
              <svg
                t="1652880679314"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1940"
                width="40"
                height="40"
              >
                <path
                  d="M938.666667 553.92V768c0 64.8-52.533333 117.333333-117.333334 117.333333H202.666667c-64.8 0-117.333333-52.533333-117.333334-117.333333V256c0-64.8 52.533333-117.333333 117.333334-117.333333h618.666666c64.8 0 117.333333 52.533333 117.333334 117.333333v297.92z m-64-74.624V256a53.333333 53.333333 0 0 0-53.333334-53.333333H202.666667a53.333333 53.333333 0 0 0-53.333334 53.333333v344.48A290.090667 290.090667 0 0 1 192 597.333333a286.88 286.88 0 0 1 183.296 65.845334C427.029333 528.384 556.906667 437.333333 704 437.333333c65.706667 0 126.997333 16.778667 170.666667 41.962667z m0 82.24c-5.333333-8.32-21.130667-21.653333-43.648-32.917333C796.768 511.488 753.045333 501.333333 704 501.333333c-121.770667 0-229.130667 76.266667-270.432 188.693334-2.730667 7.445333-7.402667 20.32-13.994667 38.581333-7.68 21.301333-34.453333 28.106667-51.370666 13.056-16.437333-14.634667-28.554667-25.066667-36.138667-31.146667A222.890667 222.890667 0 0 0 192 661.333333c-14.464 0-28.725333 1.365333-42.666667 4.053334V768a53.333333 53.333333 0 0 0 53.333334 53.333333h618.666666a53.333333 53.333333 0 0 0 53.333334-53.333333V561.525333zM320 480a96 96 0 1 1 0-192 96 96 0 0 1 0 192z m0-64a32 32 0 1 0 0-64 32 32 0 0 0 0 64z"
                  p-id="1941"
                ></path>
              </svg>
            </div>
            <div class="look_box">
              <svg
                t="1652881098273"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5380"
                width="40"
                height="40"
              >
                <path
                  d="M942.577061 507.011382c0-237.637282-192.632275-430.269557-430.269557-430.269557s-430.269557 192.632275-430.269557 430.269557c0 237.647515 192.632275 430.27979 430.269557 430.27979 97.553827 0 186.878225-33.189913 259.055081-87.88563 2.964518-3.363607 4.91187-7.655354 4.91187-12.479219 0-10.531867-8.541537-19.073404-19.072381-19.073404-5.465478 0-10.334369 2.168386-13.808494 5.842055l-0.242524 0c-64.584947 47.526433-144.086629 75.981509-230.422973 75.981509-215.179804 0-389.645324-174.489056-389.645324-389.656581 0-215.201294 174.466544-389.644301 389.645324-389.644301 215.202317 0 389.645324 174.443008 389.645324 389.644301 0 65.738213-15.423271 127.60219-44.186362 181.922353l0 0.321318c-0.533143 1.814322-1.108241 3.583618-1.108241 5.53097 0 10.531867 8.541537 19.073404 19.073404 19.073404 8.207939 0 15.06716-5.265934 17.745153-12.523221l0 0.13303C924.544359 645.279493 942.577061 578.258053 942.577061 507.011382zM399.574976 391.378805c0-24.028253-19.47147-43.499723-43.500746-43.499723-24.029276 0-43.478234 19.47147-43.478234 43.499723 0 24.029276 19.448958 43.479257 43.478234 43.479257C380.102483 434.858062 399.574976 415.408081 399.574976 391.378805zM669.735999 347.945597c-24.004717 0-43.476187 19.448958-43.476187 43.478234 0 24.029276 19.47147 43.500746 43.476187 43.500746 24.029276 0 43.50177-19.47147 43.50177-43.500746C713.237769 367.394554 693.766298 347.945597 669.735999 347.945597zM702.196295 630.742405c0-11.793604-9.558703-21.330818-21.350261-21.330818-1.88186 0-3.562129 0.620124-5.335519 1.084705l-0.441045 0c-49.473785 22.723537-104.548124 38.610366-162.562423 38.610366-57.130162 0-111.007233-16.130376-159.907966-38.233789l-0.177032 0c-2.300392-0.818645-4.690836-1.461281-7.2798-1.461281-11.880585 0-21.505803 9.602705-21.505803 21.485337 0 8.120958 4.513804 15.222703 11.129478 18.872836 54.209646 24.6494 113.883747 42.980907 177.319521 42.980907 63.037708 0 124.240629-18.686594 178.185238-43.046399 0.308015-0.149403 0.217964-0.11154 0.070608-0.045025C696.59574 645.928269 702.196295 638.545114 702.196295 630.742405z"
                  p-id="5381"
                ></path>
              </svg>
            </div>
          </div>
        </div>
        <div class="none_box public_body_css"></div>
        <div class="input_box public_body_css">
          <div class="input_box_center">
            <!-- <rich-text></rich-text> -->
            <textarea
              class="public_body_css"
              rows="10"
              cols="30"
              @keypress.enter="send_click"
              v-model="input_textarea"
            ></textarea>
          </div>
        </div>
        <div class="send_btn_box public_body_css">
          <div class="send_btn_box_center">
            <div class="btn_box"><button @click="send_click">发送</button></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    const stashStr = localStorage.getItem(
      "list_item",
      JSON.stringify(this.list_item)
    );
    return Object.assign(
      {
        input_textarea: "",
        chat_index: 0,
        list_item: [
          {
            item: [
              {
                lsit_id: 0,
                lsit_name: "别叫我狗子",
                list_last_msg: "",
                list_msg: [
                  {
                    msg_id: 1,
                    msg_img: "",
                    msg_content: "我是别叫我狗子",
                    msg_time: "2020-04-01",
                    msg_type: "text",
                    msg_is_me: false,
                  },
                  {
                    msg_id: 1,
                    msg_name: "别叫我狗子",
                    msg_img: "",
                    msg_content: "我是大哥",
                    msg_time: "2020-04-01",
                    msg_type: "text",
                    msg_is_me: true,
                  },
                ],
              },
              {
                lsit_id: 0,
                lsit_name: "詹姆斯马",
                list_msg: "Jamesma的博客",
                list_msg: [
                  {
                    msg_id: 1,
                    msg_name: "詹姆斯马",
                    msg_img: "",
                    msg_content: "你好",
                    msg_time: "2020-04-01",
                    msg_type: "text",
                    msg_is_me: false,
                  },
                  {
                    msg_id: 1,
                    msg_name: "詹姆斯马",
                    msg_img: "",
                    msg_content: "你好",
                    msg_time: "2020-04-01",
                    msg_type: "text",
                    msg_is_me: false,
                  },
                  {
                    msg_id: 1,
                    msg_name: "詹姆斯马",
                    msg_img: "",
                    msg_content: "你好",
                    msg_time: "2020-04-01",
                    msg_type: "text",
                    msg_is_me: true,
                  },
                ],
              },
              {
                lsit_id: 0,
                lsit_name: "红狗",
                list_msg: [
                  {
                    msg_id: 1,
                    msg_name: "红狗",
                    msg_img: "",
                    msg_content: "红狗",
                    msg_time: "2020-04-01",
                    msg_type: "text",
                    msg_is_me: false,
                  },
                  {
                    msg_id: 1,
                    msg_name: "红狗",
                    msg_img: "",
                    msg_content: "红狗",
                    msg_time: "2020-04-01",
                    msg_type: "text",
                    msg_is_me: true,
                  },
                  {
                    msg_id: 1,
                    msg_name: "别叫我狗子",
                    msg_img: "",
                    msg_content: "红狗",
                    msg_time: "2020-04-01",
                    msg_type: "text",
                    msg_is_me: false,
                  },
                  {
                    msg_id: 1,
                    msg_name: "别叫我狗子",
                    msg_img: "",
                    msg_content: "红狗",
                    msg_time: "2020-04-01",
                    msg_type: "text",
                    msg_is_me: false,
                  },
                ],
              },
            ],
          },
        ],
      },
      stashStr
    );
  },
  mounted() {
    this.scroll_bottom();
    console.log(JSON.stringify(this.list_item[0].item[0]))
  },
  created() {
    this.last_msg();
    var data = JSON.parse(localStorage.getItem("list_item"));
    if (!data) return;
    this.list_item = data;
  },
  methods: {
    stash() {
      localStorage.setItem("list_item", JSON.stringify(this.list_item));
    },
    // 每个列表显示最后一条消息
    last_msg() {
      for (var a = 0; a < this.list_item[0].item.length; a++) {
        var list_msg = this.list_item[0].item[a].list_msg;
        // 找到最后一条消息
        var list_last_msg = list_msg[list_msg.length - 1].msg_content;
        this.list_item[0].item[a].list_last_msg = list_last_msg;
      }
      console.log(list_last_msg);
      console.log(this.list_item[0].item[this.chat_index].list_last_msg);
    },
    scroll_bottom() {
      var data = document.getElementsByClassName("bottom_box_right_body")[0];
      data.scrollTop = data.scrollHeight;
    },
    click_change(index) {
      this.chat_index = index;
    },
    send_click() {
      var msg = this.list_item[0].item[this.chat_index].list_msg;
      console.log(this.input_textarea);
      console.log(this.chat_index);
      if (this.input_textarea != "") {
        msg.push({
          msg_id: 1,
          msg_img: "",
          msg_content: this.input_textarea,
          msg_time: "2020-04-01",
          msg_type: "text",
          msg_is_me: true,
        });
        this.input_textarea = "";
        this.scroll_bottom();
        this.stash();
      }
      this.last_msg();
      this.scroll_bottom();
    },
  },
  updated() {
    this.scroll_bottom();
    // this.stash();
  },
};
</script>

<style>
.msg_list_item_center_isme {
  width: auto;
  height: auto;
  margin: 10px auto;
  padding: 10px 15px;
  background: #80b9f2;
  border-radius: 20px 0 20px 20px;
  color: white;
}
.msg_list_item_isme {
  width: auto;
  max-width: 480px;
  height: auto;
  word-wrap: break-word;
}
.msg_list_img_isme img {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  /* 再右侧 */
}
.msg_list_img_isme {
  width: 30px;
  height: 30px;
  float: right;
  margin-left: 15px;
}
.msg_list_row_isme {
  width: 100%;
  height: auto;
  /* margin-top: 10px; */
  display: flex;
  justify-content: right;
}
.msg_list_item_center span {
  margin-left: 5px;
}
.msg_list_item_center {
  width: auto;
  height: auto;
  margin: 10px auto;
  padding: 10px 15px;
  background: #fff;
  border-radius: 0 20px 20px 20px;
}
.msg_list_item {
  width: auto;
  max-width: 480px;
  height: auto;

  margin-left: 15px;
  word-wrap: break-word;
}
.msg_list_img img {
  width: 30px;
  height: 30px;
  border-radius: 30px;
}
.msg_list_img {
  width: 30px;
  height: 30px;
  display: flex;
  flex-wrap: nowrap;
}

.msg_list_row {
  width: 100%;
  height: auto;
  margin-top: 10px;
  display: flex;
  flex-wrap: nowrap;
  position: relative;
  bottom: 0;
}
.msg_list_center {
  width: 760px;
  height: 540px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 10px;
}

.msg_list {
  width: 100%;
  height: calc(100% - 64px);
  position: relative;
}
.sum_box {
  width: 120px;
  height: 100%;
  /* 让盒子并列 */
  display: flex;
  flex-direction: column;

  /* float: right; */
}
.list_tiem_center_msg {
  width: calc(180px - 40px);
  height: 30px;
  font-size: 10px;
  /* 淡灰色 */
  color: #999;
  padding: 7px 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.list_tiem_center_title {
  width: calc(200px - 40px);
  height: auto;
  font-size: 14px;
}
.list_tiem_center_img img {
  width: 40px;
  height: 40px;
  border-radius: 30px;
}
.list_tiem_center_img {
  width: 40px;
  height: 40px;
  float: left;
  margin-right: 7px;
}
.list_tiem_center {
  width: 180px;
  height: 48px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.list_tiem:hover {
  background-color: #f4f5f7;
  cursor: pointer;
}
.list_tiem_hover {
  background-color: #f4f5f7;
}
.list_tiem {
  width: 239px;
  height: 78px;
  border-bottom: 1px solid #e9eaec;
  border-right: 1px solid #e9eaec;
  position: relative;
}
.bottom_msg {
  width: 800px;
  height: auto;
  background-color: #f4f5f7;
  float: right;
}
.btn_box button {
  cursor: pointer;
  margin: 0;
  position: relative;
  width: 88px;
  height: 30px;
  text-align: center;
  border: 1px solid #e7e7e7;
}
.btn_box {
  width: 88px;
  height: 60px;
  float: right;
}
.send_btn_box_center {
  width: 90%;
  height: 100%;
  margin: 0 auto;
}
.send_btn_box {
  width: 800px;
  height: 60px;
  margin-top: 20px;
}
/* 占位置的盒子 */
.none_box {
  width: 580px;
  height: 20px;
  float: right;
}
.input_box_center {
  width: 90%;
  height: 100%;
  margin: 0 auto;
}
.input_box textarea:focus {
  outline: none;
  font-size: 16px;
}
.input_box textarea {
  width: 100%;
  height: 100%;
  border-style: unset;
  resize: unset;
}
.input_box {
  width: 800px;
  height: 100px;
  float: right;
}
.look_box svg:hover {
  /* 蓝色 */
  fill: #00bfff;
  cursor: pointer;
}
.look_box svg {
  /* svg居中 */
  display: block;
  margin: 0 auto;
  /* 垂直居中 */
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.look_box {
  width: 48px;
  height: 48px;
  float: left;
}
.picture_box svg:hover {
  fill: #00bfff;
  cursor: pointer;
}
.picture_box svg {
  /* svg居中 */
  display: block;
  margin: 0 auto;
  /* 垂直居中 */
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.picture_box {
  width: 48px;
  height: 48px;
  float: left;
}
.msg_box_center {
  width: 90%;
  height: 100%;
  margin: 0 auto;
}
.msg_box {
  width: 800px;
  height: 48px;
}
.public_body_css {
  float: right;
  background-color: #f4f5f7;
}
.bottom_box_right_body {
  width: 100%;
  height: 580px;
  background-color: #f4f5f7;
  border-bottom: 1px solid #c0c4cc;
  /* 加进度条 */
  overflow-y: scroll;
  overflow-x: hidden;
}
.bottom_box_right_title {
  width: 100%;
  height: 36px;
  border-bottom: 1px solid #e9eaec;
  display: flex;
  /* 字体居中 */
  justify-content: center;
  align-items: center;
}

.bottom_box_left_list {
  width: 100%;
  height: auto;
}
.bottom_box_left_title {
  width: 239px;
  height: 36px;
  border-bottom: 1px solid #e9eaec;
  border-right: 1px solid #e9eaec;
}
.bottom_box_right {
  width: 800px;
  height: 100%;
  background-color: #f4f5f7;
  float: right;
}
.bottom_box_left {
  width: 239px;
  height: 100%;
  float: left;
  border-right: 1px solid #e9eaec;
}
.bottom_box {
  width: 1040px;
  height: 865px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-wrap: nowrap;
}
</style>